<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script type="importmap">
    {
        "imports": {
            "three": "../node_modules/three/build/three.module.js"
        }
    }
  </script>
  <script type="module">
    import * as THREE from "../node_modules/three/build/three.module.js"
    import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js"

    let scene = null, camera = null, renderer = null, controls = null, light = null, group = null;

    // 初始化场景
    const initScene = () => {
      scene = new THREE.Scene()
      // scene.fog = new THREE.Fog(scene.background, 3000, 5000);
    }

    // 初始化相机
    const initCamera = () => {
      camera = new THREE.PerspectiveCamera(125, window.innerWidth / window.innerHeight, 1, 2000);
      camera.position.set(-30, 30, 50);
    }

    // 初始化灯光
    const initLight = () => {
      light = new THREE.AmbientLight(0xffffff);
      scene.add(light);
    }

    // 初始化渲染器
    const initRenderer = () => {
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x4682B4, 1.0);
      document.body.appendChild(renderer.domElement);
    }

    // 创建组
    const createGroup = () => {
      group = new THREE.Group()
      scene.add(group)
    }

    // 初始化模型
    const initContent = () => { }

    // 初始化轨迹球控件
    const initControls = () => {
      controls = new OrbitControls(camera, renderer.domElement)
      controls.enableDamping = true
    }

    // 更新控件
    const update = () => {
      controls.update()
    }

    // 初始化
    const init = () => {
      initScene()//场景
      initCamera()//相机
      initLight()//光源
      initRenderer()//渲染器
      initContent()//模型
      initControls()//控制
      document.addEventListener('resize', onWindowResize)//窗口变化
    }
    // 窗口变动时触发
    const onWindowResize = () => {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      update()
    }



    // 调用初始化函数
    init()
    // 调用动画
    animate()


  </script>
</body>

</html>